<template>
    <div>
        <el-alert
                :closable="false"
                title="温馨提醒"
                type="warning"
                :description="tips">

        </el-alert>
        <!-- 搜索 -->
        <el-form :model="formItem"  label-width="80px" :inline="true" class="demo-form-inline" style="padding-top: 10px;">
            <el-form-item label="关键字">
                <el-select v-model="formItem.type" placeholder="请选择" style="width:100px;" clearable="">
                    <el-option label="用户名称" value="1"></el-option>
                    <el-option label="用户手机" value="2"></el-option>
                </el-select>
                <el-input v-model="formItem.keyword" placeholder="关键字" clearable="" style="width:200px;"></el-input>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" icon="el-icon-search" @click="searchSubmit('formItem')">搜索</el-button>
            </el-form-item>
        </el-form>
        <div style="margin-bottom: 10px;">
            <!--<el-button @click.native="exports()" type="primary" size="small" icon="el-icon-download">导出</el-button>-->
            <el-button @click.native="addUser()" type="primary" size="small">添加</el-button>
            <el-button @click.native="importResult()" type="primary" size="small" icon="el-icon-download">导入结果</el-button>
            <el-upload style="display: inline;"
                    :action="userUpload"
                    :before-upload="beforeUpload"
                    :headers="headers"
            >
                <el-button size="small" type="primary">导入</el-button>
            </el-upload>
        </div>
        <el-table ref="selection" :data="listData" border tooltip-effect="dark" style="width: 100%" @selection-change="select">
            <el-table-column fixed type="selection" width="55"></el-table-column>
            <el-table-column prop="name" label="用户名称" width="200"></el-table-column>
            <el-table-column prop="mobile" label="手机" width="200"></el-table-column>
            <el-table-column prop="city" label="所在城市">
                <template  slot-scope="scope">
                    {{scope.row.weixin ? scope.row.weixin.city : ''}}
                </template>
            </el-table-column>
            <el-table-column prop="province" label="所在省">
                <template  slot-scope="scope">
                    {{scope.row.weixin ? scope.row.weixin.province : ''}}
                </template>
            </el-table-column>
            <el-table-column prop="province" label="所在国家">
                <template  slot-scope="scope">
                    {{scope.row.weixin ? scope.row.weixin.country : ''}}
                </template>
            </el-table-column>
            <el-table-column label="状态" width="200">
                <template slot-scope="scope">
                    <el-switch v-model="scope.row.status"
                               active-color="#00A854"
                               active-text="正常"
                               :active-value="1"
                               class="demo"
                               inactive-color="#F04134"
                               inactive-text="冻结"
                               :inactive-value="2"
                               @change="changeSwitch(scope.$index)">
                    </el-switch>
                </template>
            </el-table-column>
            <el-table-column fixed="right" label="操作" width="100">
                <template slot-scope="scope">
                    <el-button @click.native.prevent="edit(scope.$index)" type="primary" size="mini">编辑</el-button>
                    <!--<el-button @click.native.prevent="del(scope.$index)" type="danger" size="mini">删除</el-button>-->
                </template>
            </el-table-column>
        </el-table>
        <div class="block" style="text-align : right; float : right; margin-top: 10px;">
            <!--<span class="demonstration">完整功能</span>-->
            <el-pagination
                    @size-change="handlePageSize"
                    @current-change="handlePage"
                    :current-page="pageNum"
                    :page-sizes="[10, 50, 100, 200]"
                    :page-size="pageSize"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="pageTotal">
            </el-pagination>
        </div>
        <!-- 用户添加修改 -->
        <el-dialog :visible.sync="userAddModal" :title="titleStr" width="500px">
            <el-form ref="activity" :model="formAdd" :rules="formAddValidate" label-width="80px" class="demo-ruleForm">
                <el-form-item label="名称" prop="name">
                    <el-input v-model="formAdd.name" style="width:300px;"  placeholder="请输入名称"></el-input>
                </el-form-item>
                <el-form-item label="手机" prop="mobile">
                    <el-input v-model="formAdd.mobile" style="width:300px;"  placeholder="请输入手机"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click.native="addSubmit('formAdd')">提交</el-button>
                    <el-button @click="addCancel()">取消</el-button>
                </el-form-item>
            </el-form>
        </el-dialog>
    </div>
</template>

<script>
    import axios from "@/axios";
    import { isIntNum,getHeaders } from "@/assets/js/common";
    export default {
        name: "index",
        data() {
            return {
                base:{},
                formItem: {
                    type: "",
                    keyword: "",
                },
                listData: [], // 用户列表
                pageTotal: 0,
                pageNum: 1,
                pageSize: 10,
                userUpload:"",
                tips: "",
                headers: {},
                userAddModal: false,
                titleStr: "",
                formAdd: {
                    name: "",
                    mobile: ""
                },
                formAddValidate: {
                    name: [
                        {
                            required: true,
                            message: "名称不能为空",
                            trigger: "blur"
                        }
                    ],
                    mobile: [
                        {
                            required: true,
                            message: "手机不能为空",
                            trigger: "blur"
                        }
                    ],
                }
            }
        },
        mounted() {
            this.base = JSON.parse(sessionStorage.base);
            this.userUpload = this.base.domain_name + '/admin/member/import';
            this.tips="用户导入模板下载地址：" + this.base.domain_name + '/template/import_demo.xlsx';
            this.headers = getHeaders(localStorage._token);
            // 用户列表
            this.getMemberList();
        },
        methods: {
            beforeUpload(file) {
                const isJPG = file.type === 'application/vnd.ms-excel' || file.type === 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet';
                const isLt2M = file.size / 1024 / 1024 < 50;

                if (!isJPG) {
                    this.$message.error('上传文件只能是 excel 格式!');
                }
                if (!isLt2M) {
                    this.$message.error('上传文件大小不能超过 50MB!');
                }
                return isJPG && isLt2M;
            },
            // 图片预览
            getImgList(row){
                let images = [];
                if (row.weixin) {
                    images.push(row.weixin.headimgurl);
                }
                return images
            },
            //获取勾选参数
            select(val) {
                let vm = this;
                vm.ids = [];
                for (let i in val) {
                    vm.ids.push(val[i].id);
                }
            },
            //当前页数
            handlePage(value) {
                this.pageNum = value;
                this.getMemberList();
            },
            //每页显示条数
            handlePageSize(value) {
                this.pageSize = value;
                this.getMemberList();
            },
            //搜索
            searchSubmit() {
                this.pageNum = 1;
                this.getMemberList();
            },
            //获取用户列表
            getMemberList() {
                let vm = this;
                axios
                    .post("/admin/member/get-lists", {
                        page: this.pageNum,
                        limit: this.pageSize,
                        type: this.formItem.type,
                        keyword: this.formItem.keyword
                    })
                    .then(response => {
                        let status = response.status;
                        let data = response.data;
                        if (data.code == 200) {
                            let result = data.data;
                            vm.pageTotal = result.total;
                            vm.listData = result.list;
                        } else {
                            vm.$message.info(data.message);
                        }
                    })
                    .catch(error => {
                        // vm.$Message.info("网络或服务器异常");
                    });
            },
            //更改状态
            changeSwitch(index) {
                let vm = this;
                if (this.listData[index].status == 1) {
                    status = 2;
                } else {
                    status = 1;
                }
                axios
                    .post("/admin/member/updateStatus", {
                        user_id: vm.listData[index].id,
                        status: status
                    })
                    .then(response => {
                        let status = response.status;
                        let data = response.data;
                        if (data.code == 200) {
                            this.$message({
                                message: '操作成功!',
                                type: 'success',
                                onClose: function(msg) {
                                    vm.getMemberList();
                                }
                            });
                        } else {
                            vm.$message.error(data.message);
                        }
                    })
                    .catch(error => {
                        // vm.$message.info("网络或服务器异常");
                    });
            },
            // 导出
            exports() {
                let vm = this;
                let http_url = vm.base.domain_name + '/admin/member/export';
                let params = '?page='+vm.pageNum+"&limit="+vm.pageSize+"&keyword="+vm.formItem.keyword+"&type="+vm.formItem.type;
                window.open(http_url+params,"_blank");
            },
            // 导入结果
            importResult() {
                this.$router.push({
                    path: "user_import"
                });
            },
            // 添加用户
            addUser() {
                this.titleStr = '添加用户';
                this.userAddModal = true;
            },
            // 添加处理
            addSubmit(name) {
                let vm = this;
                vm.$refs.activity.validate(valid => {
                    if (valid) {
                        axios
                            .post("/admin/member/store", vm.formAdd)
                            .then(response => {
                                let status = response.status;
                                let data = response.data;
                                if (data.code == 200) {
                                    vm.userAddModal = false;
                                    vm.formAdd.id = "";
                                    vm.formAdd.name = "";
                                    vm.formAdd.mobile = "";
                                    vm.$message({
                                        type: 'success',
                                        message: "操作成功!",
                                        onClose: function (msg) {
                                            vm.getMemberList();
                                        }
                                    });
                                } else {
                                    vm.$message.error(data.message);
                                }
                            })
                            .catch(error => {
                                // vm.$Message.error("网络或服务器异常");
                            });
                    } else {
                        // vm.$Message.error("Fail!");
                    }
                });
            },
            // 添加框取消
            addCancel() {
                this.userAddModal = false;
                this.formAdd.name = "";
                this.formAdd.mobile = "";
                this.getMemberList();
            },
            // 编辑
            edit(index) {
                this.titleStr = '编辑用户';
                this.userAddModal= true;
                this.formAdd = this.listData[index];
            },
        }
    }
</script>

<style scoped>

</style>